<template>
	<view class="visit">
		<view class="add_item" >
			<checkbox value="选择" :checked="checked" @click="checkBox($event)" />
			<view>是否签到</view>
		</view>
		<view class="add_item">
			<view>地址</view>
			<view class="add_addr" @tap="getAddr()">
				<image src="/static/images/addr.png"></image>
				<view>{{address == "" ? "点击获取地址" : address}}</view>
				<image src="/static/images/right.png" class="right"></image>
			</view>
		</view> 
		
		
		<view class="bottom_btn">
			<view class="bottom_btn_list">
				<view @tap="visitBth">拜访签到</view>
			</view>
		</view>
		<Loading ref="load"></Loading>
	</view>
</template>
ap
<script>
	import WXMap from '@/js_sdk/qqmap-wx-jssdk.min.js'
	//import QQMapWX from '../../../../js_sdk/qqmap-wx-jssdk.min'

	export default{
		data(){
			return{
				boxHide: true,
				loading: true,
				address: "",
				location:{latitude:0,longitude:0}, // 当前用户坐标
				checked: false,
				id: "",
				TXMap:[],
				customerAddress:"", // 客户地址
				customerLocation:{latitude:0,longitude:0}, // 客户地址坐标
				range:false, // 是否在范围内
				appointmentDate:""   // 预约签到时间
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.customerAddress = options.address;
			this.appointmentDate = options.appointmentDate;
 
			// 腾讯地图SDK
			this.TXMap = new WXMap({
				key:'KYTBZ-3R46P-O2BDC-LZ5WW-6BTB2-M6FOJ'
			})

			this.getLoaction();

			this.getAddr();
		},
		methods:{
			checkBox(e){ //签到
				this.checked = !this.checked;
			},
			getAddr(){
				let that = this;
				uni.getLocation({
					type:'gcj02',
					success(e){
 
						let location = {'latitude':e.latitude,'longitude':e.longitude};
						// 设置坐标
						that.location.latitude = e.latitude;
						that.location.longitude = e.longitude;

						console.log("坐标地址---》》》",location);
					
						// 获取坐标的位置
						that.TXMap.reverseGeocoder({
							location: location,
							success:function(res){ // 成功后返回

								that.address = res.result.address;

							},
							fail: function(error) {
								console.error(error);
							}
						})
					}
				})
				
			},
			getLoaction(){ // 获取客户坐标位置

				let that = this;
				// 获取地址的坐标
				this.TXMap.geocoder({
					address:this.customerAddress,
					success:function(res){ 
						that.customerLocation.latitude = res.result.location.lat;
						that.customerLocation.longitude = res.result.location.lng;
					},
					fail: function(error) {
						console.error("失败---------《《《《《《《《《《",error);
					},
					complete: function(res) {
						console.log(res);
					}
				})

			},
			// 在范围内
			inRange(){ 
				let that = this;

				return new Promise((resolve,reject)=>{ // 回调

					// 计算距离
					this.TXMap.calculateDistance({
						from: that.location.latitude+","+that.location.longitude,
						to:that.customerLocation.latitude+","+that.customerLocation.longitude,
						success:function(res){
							console.log("成功返回-----》》》》》》》》",res);
							let dis = [];
							for (let i = 0; i < res.result.elements.length; i++) {
								dis.push(res.result.elements[i].distance); //将返回数据存入dis数组，
							}
							// 判断范围小于500~1000
							if(dis[0]<500){
								that.range = true;
							}
							//that.range = true;
							resolve(true)
						},
						fail: function(error) {
							console.error("失败-----------》》》》》》》",error);
						},
						complete: function(res) {
							console.log(res);
						}
					})

				})
				

			},
			visitBth(){
				this.inRange().then(res => {

					console.log("查看是否赋值-----》》》》》",this.range);
					let that = this;
					if(that.checked == false){
						uni.showToast({
							title: "请勾选拜访按钮",
							icon:"none"
						})
					}else if (that.address.length < 1){
						uni.showToast({
							title:"请添加地址",
							icon:"none"
						})
					}else if(that.range == false){
						uni.showToast({
							title: "签到失败，不在范围内",
							icon:"none"
						})
					}else{
						 // 获取当前时间
						let thisTime = this.utils.formatDate(new Date()).f3;

						this.$api.getVisitSign({id: that.id, address: this.address}).then((res) => {
							
							let meg = "签到成功";

							// 判断签到超时
							if(thisTime >  this.appointmentDate){
								meg = "签到超时";
							}

							uni.showToast({
								title:meg,
								success:function(res){
									setTimeout(function(){
										uni.navigateBack({})
									},1500);
								}
							})
 
						})
					}

				})
				
			}
			
		}
	}
</script>

<style>
	.visit{background: #FFFFFF;padding-bottom: 50upx;}
</style>
